<template>
    <div>
        <div class="pay f14">
            <span>{{ pay }}</span>
            <span class="grey">{{ payDetail }}</span>
        </div>
        <div class="mode f14 b">
            <span>{{ mode }}</span>
            <span class="grey">{{ modeDetail }}</span>
        </div>
    </div>
</template>
<script>
export default {
    name: "DoubleMiniCard",
    props: {
        pay: String,
        payDetail: String,
        mode: String,
        modeDetail: String,
    }
}
</script>
<style lang="scss" scoped>
.pay,
.mode {
    height: 45px;
    padding: 0 10px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pay {
    border-bottom: 2px solid #f7f7f7;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.mode {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
</style>